<template>
	<view class="page">
		<!-- 导航栏部分 -->
		<view class="navbar">
			<u-navbar :is-back="false" :background="bg">
				<!-- 导航栏自定义胶囊 -->
				<view class="slot-wrap u-flex">
					<view class="slot-icon u-flex" @click="back"><u-icon name="arrow-left"></u-icon></view>
					<view class="gap"></view>
					<view class="slot-icon u-flex" @click="subMenu = true"><u-icon name="list"></u-icon></view>
				</view>
				<!-- 导航栏菜单列表 -->
				<view v-show="subMenu">
					<view class="triangle"></view>
					<view class="subMenu">
						<view class="item" @click="navigateTo('../../search/search', 'page')">
							<u-icon name="search"></u-icon>
							<text>搜索商品</text>
						</view>
						<view class="item" @click="navigateTo('/pages/user/order/order', 'page')">
							<u-icon name="order"></u-icon>
							<text>我的订单</text>
						</view>
						<view class="item" @click="navigateTo('/pages/user/like/like', 'page')">
							<u-icon name="heart"></u-icon>
							<text>我的收藏</text>
						</view>
						<view class="item" @click="navigateTo('/pages/user/history/history', 'page')">
							<u-icon name="clock"></u-icon>
							<text>我的足迹</text>
						</view>
					</view>
					<view class="mask" @click="subMenu = false"></view>
				</view>
			</u-navbar>
		</view>
		<!-- 轮播图 -->
		<view class="swiperBox">
			<swiper :autoplay="swiperAutoPlay" circular :interval="3000" :duration="200" @change="swiperChange" :current="swiperCurrent">
				<swiper-item v-if="swiperVideo.url !== ''" class="swiper-video">
					<video
						:src="swiperVideo.url"
						controls
						:enable-progress-gesture="false"
						:autoplay="false"
						id="swiper-video"
						@ended="videoEnd"
						@loadedmetadata="videoLoaded"
						@timeupdate="videoPlay"
					></video>
					<image :src="swiperVideo.poster" class="poster" v-show="showPoster"></image>
				</swiper-item>
				<swiper-item v-for="(item, index) in swiperImgs" :key="index"><image :src="item.url" mode="scaleToFill"></image></swiper-item>
			</swiper>
			<!-- 播放按钮 -->
			
			<!-- 自动播放获取视频时长 -->
			<view v-if="swiperVideo.url != ''" :style="{ opacity: playBtnOp, transition: '.5s' }">
				<view class="playBtn" @click="playVideo">
					<image src="/static/icon/play.png"></image>
					<text>{{ swiperVideo.duration.m + "'" }}{{ swiperVideo.duration.s + '"' }}</text>
				</view>
			</view>
			<!-- <view v-if="swiperVideo.url != ''" class="hide-video"><video :src="swiperVideo.url" muted @timeupdate="autoPlay" id="hide-video"></video></view> -->
			<!-- 轮播图指示器 -->
			<view class="count">
				<span>{{ swiperCurrent + 1 }}</span>
				<span>/</span>
				<span>{{ !swiperVideo.url ? swiperImgs.length : swiperImgs.length + 1 }}</span>
			</view>
			<!-- <view class="back" @click="back"><u-icon name="arrow-left" color="#fff" size="28"></u-icon></view> -->
		</view>
		<!-- 特卖汇 -->
		<view class="temaihui">
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/5206f860-8b04-11ea-b244-a9f5e5565f30.png"></image>
			<!-- 倒计时 -->
			<u-count-down class="countDown" :timestamp="time" :show-days="false" color="#D61515" bg-color="#fff" font-size="26" height="32" separator-color="#fff"></u-count-down>
		</view>
		<!-- 价格与标题 -->
		<view class="price_title">
			<!-- 价格 -->
			<view class="priceBox">
				<view class="price">
					<text>￥</text>
					<text>{{ goodsInfo.price }}</text>
				</view>
				<text class="market_price" v-if="goodsInfo.price != goodsInfo.market_price">￥{{ goodsInfo.market_price }}</text>
				<text class="label" :style="{ backgroundColor: goodsInfo.label.attrs.bgColor }">{{ goodsInfo.label.text }}</text>
				<view class="like" @click="likeGoods">
					<image src="/static/icon/product_unfavor.png" v-if="!favorite"></image>
					<image src="/static/icon/product_favor.png" v-else></image>
				</view>
			</view>
			<!-- 标题区 -->
			<view class="goodsTitle">
				<view class="main">{{ goodsInfo.title }}</view>
				<view class="sub">{{ goodsInfo.summary }}</view>
				<view class="activity">{{ operation.wzl.staticWords }}</view>
				<view class="activity-entry" v-if="operation.wzl">{{ operation.wzl.hyperlinkWords }} ></view>
			</view>
		</view>
		<!-- 红包 -->
		<u-gap height="16" bg-color="#f9f9f9"></u-gap>
		<view class="red-packet" v-if="compose.redPacket"><image :src="compose.redPacket.pic_url" @click="redPacket"></image></view>
		<u-gap height="16" bg-color="#f9f9f9"></u-gap>
		<!-- <u-cell-group :border="false">
			<u-cell-item @click="redPacket">
				<u-icon slot="icon" size="28" name="red-packet-fill" color="#ff2e2e"></u-icon>
				<view slot="title" class="redPacket">新人领500元礼包</view>
			</u-cell-item>
		</u-cell-group>
		<u-gap height="16" bg-color="#f9f9f9"></u-gap> -->
		<!-- 功能区 -->
		<view class="function">
			<u-cell-group :border="false">
				<u-cell-item @click="goodsPop = true">
					<view slot="title" class="listItem">
						<text class="subTitle">已选</text>
						<view class="selected-box">
							<text class="selected" v-for="(item, index) in selectedInfo.specSelected" :key="index">{{ item.name }}</text>
						</view>
						<text>x{{ selectedInfo.goodsCount }}</text>
					</view>
				</u-cell-item>
				<u-cell-item>
					<view slot="title" class="listItem">
						<text class="subTitle">送至</text>
						<text>河南省 郑州市</text>
						<text class="isStock">有货</text>
					</view>
				</u-cell-item>
				<u-cell-item @click="servicePop = true">
					<view slot="title" class="listItem service">
						<text class="subTitle">服务</text>
						<view v-for="(item, index) in goodsInfo.services" :key="index" class="item">
							<image src="/static/icon/checkbox_check_hollowred.png"></image>
							<text>{{ item.text }}</text>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<!-- 选择规格弹窗 -->
			<u-popup v-model="goodsPop" class="goodsPop" mode="bottom" length="70%" border-radius="36">
				<view class="goodsInfo">
					<image :src="selectedInfo.goodsInfo.img" @click="previewImg(selectedInfo.goodsInfo.img)"></image>
					<view class="selectedInfo">
						<view class="price">
							<text>￥</text>
							<text>{{ goodsInfo.price }}</text>
						</view>
						<view class="selected">
							<text>已选：</text>
							<text v-for="(item, index) in selectedInfo.specSelected" :key="index">{{ item.name }}</text>
							<text>x{{ selectedInfo.goodsCount }}</text>
						</view>
					</view>
				</view>
				<scroll-view class="propBox" scroll-y :show-scrollbar="false">
					<view class="prop" v-for="(item, index) in specList" :key="index">
						<view class="attr">{{ item.name }}</view>
						<view class="value">
							<text
								v-for="(cItem, cIndex) in specChildList"
								v-if="cItem.pid === item.tid"
								:key="cIndex"
								:class="{ selected: cItem.selected }"
								@click="selectSpec(cIndex, cItem.pid)"
							>
								{{ cItem.name }}
							</text>
						</view>
					</view>
					<view class="prop count">
						<view class="attr">数量</view>
						<u-number-box :value="selectedInfo.goodsCount" :max="9" :min="1" @change="addCount"></u-number-box>
					</view>
				</scroll-view>
				<view class="btnBox"><view class="btn" @click="nextStep">确定</view></view>
			</u-popup>
			<!-- 服务信息弹窗 -->
			<u-popup v-model="servicePop" mode="bottom" length="60%" border-radius="36">
				<view class="title">
					说明
					<u-icon class="close" color="#777" name="close-circle" size="28" @click="servicePop = false"></u-icon>
				</view>
				<scroll-view scroll-y class="detail">
					<view class="serviceBox" v-for="(item, index) in servicesDetail.serviceList" :key="index">
						<view class="item">
							<image src="/static/icon/checkbox_check_hollowred.png"></image>
							<text>{{ item.name }}</text>
						</view>
						<view
							class="serviceDetail"
							v-for="(sitem, sindex) in item.descList"
							:key="sindex"
							:style="{ color: item.type == 'MERCHANT' ? '#9F8052' : '#777' }"
							@click="showQualification(item.type)"
						>
							{{ sitem }}
						</view>
					</view>
				</scroll-view>
			</u-popup>
		</view>
		<u-gap height="16" bg-color="#f9f9f9"></u-gap>
		<!-- 排行榜 -->
		<view class="rank u-flex">
			<text>{{ compose.rank.text || '暂未入榜' }}</text>
			<u-icon name="arrow-right" color="#C5C5C5"></u-icon>
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/82567ab0-abb4-11ea-8bd0-2998ac5bbf7e.png"></image>
		</view>
		<u-gap height="16" bg-color="#f9f9f9"></u-gap>
		<!-- 用户评价 -->
		<view class="comment card" v-if="comment.index">
			<view class="head">
				<view class="title">用户评价({{ comment.index.total_count }})</view>
				<view class="more" @click="goToMoreComment('__all__')">
					<text>{{ comment.index.positive_rate }}%满意</text>
					<image src="/static/icon/arrow_right.png"></image>
				</view>
			</view>
			<view class="tags">
				<text class="item" v-for="item in comment.index.tags" :key="item.id" @click="goToMoreComment(item.id)">{{ item.name }}({{ item.count }})</text>
			</view>
			<scroll-view scroll-x :show-scrollbar="false" enable-flex @scrolltolower="goToMoreComment('__all__')" :lower-threshold="0">
				<view class="scoll-wrapper">
					<view class="item" v-for="item in comment.content" :key="item.comment_id">
						<view class="user">
							<image :src="item.avatar || 'https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_userhead.png'" mode="aspectFill"></image>
							<text class="name">{{ item.nick_name }}</text>
							<u-rate :count="5" :current="item.score" disabled size="24" active-color="#f1c158"></u-rate>
						</view>
						<view class="content u-line-2">{{ item.text }}</view>
					</view>
					<view class="more" @click="goToMoreComment('__all__')">
						<text>查看更多评价</text>
						<image src="/static/icon/arrow_right_circle.png" mode=""></image>
					</view>
					<view class="white"></view>
				</view>
			</scroll-view>
		</view>
		<u-gap height="16" bg-color="#f9f9f9"></u-gap>
		<!-- 问大家 -->
		<view class="question card">
			<view v-if="compose.question.count" @click="goToMoreQuestion">
				<view class="head">
					<view class="title">问大家({{ compose.question.count || 0 }})</view>
					<view class="more"><image src="/static/icon/arrow_right.png"></image></view>
				</view>
				<view class="list">
					<view class="item u-flex" v-for="item in compose.question.top" :key="item.ask_id">
						<image src="/static/icon/ask_question.png"></image>
						<text class="title u-line-1">{{ item.ask }}</text>
						<text class="count">{{ item.rcount }}个回答</text>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="head"><view class="title">暂无问答</view></view>
				<view class="ask-empty u-flex">
					<image src="/static/icon/ask_list_empty.png"></image>
					<text>好不好，问大家</text>
					<view class="btn" @click="askQuestion">去提问</view>
				</view>
			</view>
		</view>
		<u-gap height="16" bg-color="#f9f9f9"></u-gap>
		<!-- 为你推荐 -->
		<view class="swiper-goods" v-if="compose.swiperRecommend">
			<view class="head u-flex-col">
				<view class="title">为你推荐</view>
				<view class="underline"></view>
			</view>
			<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="200" indicator-active-color="#c7a26d" indicator-color="#eee" circular>
				<swiper-item v-for="(item, index) in compose.swiperRecommend" :key="index">
					<view class="goods">
						<view class="item" v-for="(sitem, sindex) in item" :key="sindex" @click="goToGoodsDetail(sitem.data.goods.gid)">
							<image class="goods-img" :src="sitem.data.goods.imgSquare" lazy-load />
							<view class="labelbox">
								<text v-for="(litem, lindex) in sitem.data.goods.labels" :key="lindex" :style="{ backgroundColor: litem.attrs.bgColor }">{{ litem.text }}</text>
							</view>
							<view class="title u-line-2">{{ sitem.data.goods.name }}</view>
							<view class="price">
								<text>￥</text>
								<text class="priceMin">{{ sitem.data.goods.priceMin / 100 }}</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<u-gap height="16" bg-color="#f9f9f9"></u-gap>
		<!-- 商家信息 -->
		<view class="shop card">
			<view class="info u-flex">
				<image class="logo" :src="goodsInfo.brand.brandLogo" mode="aspectFit" lazy-load></image>
				<view class="name u-flex-col">
					<text class="main">{{ goodsInfo.brand.brandName }}</text>
					<text class="sub">{{ goodsInfo.brand.brandSlogan }}</text>
				</view>
				<view class="go-to-shop u-flex">
					<text>进入店铺</text>
					<image src="/static/icon/arrow_right_brown.png"></image>
				</view>
			</view>
			<view class="grade u-flex">
				<view class="item">
					<text>商品描述</text>
					<text class="score" :style="{ color: compose.shopInfo.dsrInfo.product.level == 'high' ? '#9f8052' : '#999' }">
						{{ compose.shopInfo.dsrInfo.product.score }}
					</text>
					<text
						class="level"
						:style="{
							backgroundColor: compose.shopInfo.dsrInfo.product.level == 'high' ? '#cf9e56' : '#ebebeb',
							color: compose.shopInfo.dsrInfo.product.level == 'high' ? '#fff' : '#999'
						}"
					>
						{{ compose.shopInfo.dsrInfo.product.level | level }}
					</text>
				</view>
				<view class="item">
					<text>卖家服务</text>
					<text class="score" :style="{ color: compose.shopInfo.dsrInfo.merchant.level == 'high' ? '#9f8052' : '#999' }">
						{{ compose.shopInfo.dsrInfo.merchant.score }}
					</text>
					<text
						class="level"
						:style="{
							backgroundColor: compose.shopInfo.dsrInfo.merchant.level == 'high' ? '#cf9e56' : '#ebebeb',
							color: compose.shopInfo.dsrInfo.merchant.level == 'high' ? '#fff' : '#999'
						}"
					>
						{{ compose.shopInfo.dsrInfo.merchant.level | level }}
					</text>
				</view>
				<view class="item">
					<text>物流服务</text>
					<text class="score" :style="{ color: compose.shopInfo.dsrInfo.delivery.level == 'high' ? '#9f8052' : '#999' }">
						{{ compose.shopInfo.dsrInfo.delivery.score }}
					</text>
					<text
						class="level"
						:style="{
							backgroundColor: compose.shopInfo.dsrInfo.delivery.level == 'high' ? '#cf9e56' : '#ebebeb',
							color: compose.shopInfo.dsrInfo.delivery.level == 'high' ? '#fff' : '#999'
						}"
					>
						{{ compose.shopInfo.dsrInfo.delivery.level | level }}
					</text>
				</view>
			</view>
		</view>
		<u-gap height="16" bg-color="#f9f9f9"></u-gap>
		<!-- 底部图片分类 -->
		<u-tabs
			:list="goodsInfo.introExt"
			name="title"
			:is-scroll="false"
			:current="introExtCurrent"
			@change="introExtChange"
			:bold="false"
			inactive-color="#999"
			active-color="#c7a26d"
			:font-size="26"
			:duration="0.2"
		></u-tabs>
		<!-- 分割线 -->
		<!-- <u-divider bg-color="#F9F9F9" height="100" half-width="280">商品详情</u-divider> -->
		<!-- 详情图 -->
		<view class="detailImgs">
			<!-- 详情图列表 -->
			<image v-for="(item, index) in detailImgs" :key="index" :src="item" mode="widthFix" lazy-load @click="previewImg(item)"></image>
		</view>
		<!-- 底部菜单 -->
		<view class="bottom-menu">
			<view class="btns">
				<view class="btn" @click="navigateTo('../../../tabbar/index/index', 'tabbar')">
					<u-icon name="home" custom-prefix="custom-icon" size="36"></u-icon>
					<text>首页</text>
				</view>
				<view class="btn">
					<button class="contact" open-type="contact">客服</button>
					<u-icon name="kefu" custom-prefix="custom-icon" size="36"></u-icon>
					<text>客服</text>
				</view>
				<view class="btn" @click="navigateTo('../../../tabbar/cart/cart', 'tabbar')">
					<u-icon name="cart" custom-prefix="custom-icon" size="36"></u-icon>
					<text>购物车</text>
				</view>
			</view>
			<view class="next">
				<view @click=";(goodsPop = true), (functionType = 'cart')">加入购物车</view>
				<view @click=";(goodsPop = true), (functionType = 'order')">立即购买</view>
			</view>
		</view>
		<u-back-top
			:scroll-top="scrollTop"
			:top="1200"
			icon="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_totop_circle_black.png"
			:custom-style="{ backgroundColor: 'transparent' }"
		></u-back-top>
		<mi-toast ref="miToast" />
		<full-loading :show="fullLoading" bg-color="#fff"></full-loading>
	</view>
</template>

<script>
import fullLoading from '@/components/full-loading.vue'
export default {
	data() {
		return {
			gid: 0,
			swiperCurrent: '',
			swiperVideo: {
				url: '',
				duration: {
					m: '00',
					s: '00'
				},
				playing: false,
				poster: ''
			},
			swiperImgs: [],
			swiperAutoPlay: true,
			showPoster: true,
			playBtnOp: 0,
			goodsInfo: {
				title: '',
				summary: '',
				price: '',
				market_price: '',
				label: '',
				services: [],
				brand: {},
				introExt: []
			},
			operation: {},
			comment: {},
			compose: {
				shopInfo: {
					dsrInfo: {
						delivery: {
							level: 'high'
						},
						product: {
							level: 'high'
						},
						merchant: {
							level: 'high'
						}
					}
				}
			},
			servicesDetail: {},
			servicePop: false,
			goodsPop: false,
			selectedInfo: {
				goodsCount: 1,
				specSelected: [],
				goodsInfo: {}
			},
			specList: [],
			specChildList: [],
			productInfo: [],
			propTags: [],
			introExtCurrent: 0,
			detailImgs: [],
			bg: {
				backgroundColor: 'transparent'
			},
			subMenu: false,
			fullLoading: true,
			time: 6 * 60 * 60,
			functionType: 'order',
			scrollTop: 0
		}
	},
	onLoad(e) {
		this.gid = parseInt(e.gid)
		console.log('当前商品ID为：' + e.gid)
		this.getGoodsDetail()
		this.addFootprint()
		// console.log(e.id)
		// // this.getSpecs(e.id)
		// this.showToast(e.gid)
	},
	onReady() {
		// 生成随机时间
		this.time = Math.floor(Math.random() * 25) * 3600
	},
	methods: {
		// 获取商品详情
		getGoodsDetail() {
			this.$u.api.getGoodsDetail({gid:this.gid}).then(res => {
				console.log(res)
				this.fullLoading = false
				const goods = res.data.goods
				// 处理轮播图和视频
				goods.carouselMapList.forEach(x => {
					if (x.type == 0) {
						this.swiperImgs.push(x)
					} else if (x.type == 1) {
						this.swiperVideo.url = x.url
					}
				})
				if (this.swiperVideo.url !== '') {
					this.videoContext = uni.createVideoContext('swiper-video', this)
					// this.hideVideo = uni.createVideoContext('hide-video', this)
					// this.hideVideo.play()
					// setTimeout(() => {
					// 	this.hideVideo.stop()
					// }, 3000)
					// 如果轮播图中有视频，则把轮播图的第一张图片作为视频封面。
					this.swiperVideo.poster = this.swiperImgs[0].url
					this.swiperImgs.splice(0, 1)
				}
				// 商品价格
				this.goodsInfo.price = goods.goodsInfo.priceMin / 100
				this.goodsInfo.market_price = goods.goodsInfo.marketPrice / 100
				// 标签
				if (goods.labels) {
					this.goodsInfo.label = goods.labels[0]
				}
				// 商品标题
				this.goodsInfo.title = goods.goodsInfo.name
				this.goodsInfo.summary = goods.goodsInfo.summary
				// 详情分类
				this.goodsInfo.introExt = goods.goodsInfo.introExt
				// 标题下活动
				this.operation = res.data.operation
				// 规格对应的商品
				this.productInfo = goods.productInfo
				// 处理商品规格
				// 将获取到的商品规格重新组成新的数组
				if (goods.shopTags.length != 0) {
					const spec = goods.shopTags
					spec.forEach(x => {
						this.specList.push({
							name: x.name,
							tid: x.tid
						})
					})
					spec.forEach(item => {
						item.tags.forEach(cItem => {
							this.specChildList.push({
								tid: cItem.tid,
								name: cItem.name,
								pid: cItem.parentId
							})
						})
					})
					// 规格 默认选中第一条
					this.specList.forEach(item => {
						for (let cItem of this.specChildList) {
							if (cItem.pid === item.tid) {
								this.$set(cItem, 'selected', true)
								this.selectedInfo.specSelected.push(cItem)
								break //forEach不能使用break
							}
						}
					})
					setTimeout(() => {
						this.queryGoodsInfo()
					}, 1000)
					// 规格对照表
					this.propTags = goods.propTags
				} else {
					// 根据ID查询商品信息
					for (let x in this.productInfo) {
						if (x == goods.goodsInfo.pids[0]) {
							this.selectedInfo.goodsInfo = this.productInfo[x]
						}
					}
				}
				// 品牌
				this.goodsInfo.brand = goods.brand
				// 服务信息
				for (let x in goods.services) {
					this.goodsInfo.services.push(goods.services[x])
				}
				if (this.goodsInfo.services.length > 3) {
					this.goodsInfo.services.splice(3)
				}
				// 评价
				if (res.data.comment.content != null) {
					this.comment = res.data.comment
					this.comment.index.tags.splice(0, 1)
					this.comment.index.tags.splice(4)
				}
				// 服务信息
				this.servicesDetail = res.data.serviceInfo
				// 更多模块信息
				this.getCompose()
				// 获取详情页图片
				this.getDetailImgs()
			})
		},
		// 更多模块信息
		getCompose() {
			this.$u.api.getGoodsCompose({gid:this.gid}).then(res => {
				console.log(res)
				// 把商品列表数据分割成六个小数组，供轮播图使用
				if (res[0].data.recommendResponseList) {
					const goods = res[0].data.recommendResponseList
					const length = goods.length
					let arr = []
					for (let i = 0; i < length / 6; i++) {
						arr.push(goods.splice(0, 6))
					}
					this.compose.swiperRecommend = arr
				}
				this.compose.rank = res[1].data
				this.compose.bottomRecommend = res[2].data.recommendResponseList
				this.compose.shopInfo = res[3].data
				// if (res[4].data.resource) {
				// 	this.compose.redPacket = res[4].data.resource
				// }
				// console.log(res[4])
				this.compose.question = res[5].data
				this.compose.article = res[6].data.data
			})
		},
		// 查看商家资质
		showQualification(type) {
			if (type != 'MERCHANT') return
			this.previewImg(this.servicesDetail.qualificationPic)
		},
		// 查看更多评价
		goToMoreComment(id = '__all__') {
			uni.navigateTo({
				url: '../comment/comment?gid=' + this.gid + '&cid=' + id
			})
		},
		// 查看更多问答
		goToMoreQuestion() {
			uni.navigateTo({
				url: '../question/question?gid=' + this.gid
			})
		},
		// 查看商品详情
		goToGoodsDetail(gid) {
			uni.redirectTo({
				url: './detail?gid=' + gid
			})
			// this.onLoad()
			// uni.navigateTo({
			// 	url:'./detail?gid=' + gid
			// })
		},
		// 切换图片分类
		introExtChange(index) {
			this.introExtCurrent = index
			this.getDetailImgs(index)
		},
		// 获取详情页图片
		getDetailImgs(index = 0) {
			this.detailImgs = []
			const urlCheck = RegExp('^https://cdn')
			const result = urlCheck.test(this.goodsInfo.introExt[0].url)
			if (!result) {
				// 1 自营商品 2非自营
				let data = {
					gid: this.gid,
					title: this.goodsInfo.introExt[index].title,
					type: this.goodsInfo.brand.brandId == 11 ? 1 : 2
				}
				this.$u.api.detailImg(data).then(res => {
					if (res.code == 400004024) {
						this.$refs.miToast.show({
							title: `获取商品详情图失败，请刷新重试`,
							type: 'error'
						})
					} else {
						res.rags.forEach(x => {
							if (x.editorName == 'pic_link_full_default_empty') {
								this.detailImgs.push(x.src)
							}
						})
					}
				})
			} else {
				let arr = this.goodsInfo.introExt[index].url.split('/')
				let param = arr[arr.length - 1].replace('html', 'json')
				let data = {
					type:3,
					param
				}
				this.$u.api.detailImg(data).then(res => {
					res.data.forEach(x => {
						this.detailImgs.push(x.Img)
					})
				})
			}
		},
		playVideo() {
			this.swiperCurrent = 0
			this.swiperAutoPlay = false
			this.showPoster = false
			this.playBtnOp = 0
			this.videoContext.play()
		},
		videoEnd() {
			this.swiperAutoPlay = true
			this.showPoster = true
			this.playBtnOp = 1
		},
		videoLoaded(e) {
			const duration = parseInt(e.target.duration)
			this.swiperVideo.duration.m = parseInt(duration / 60)
				.toString()
				.padStart(2, '0')
			this.swiperVideo.duration.s = (duration % 60).toString().padStart(2, '0')
			this.playBtnOp = 1
		},
		videoPlay(e) {
			if (e.detail.currentTime != 0) {
				this.swiperVideo.playing = true
			}
		},
		//选择规格
		selectSpec(index, pid) {
			let list = this.specChildList
			list.forEach(item => {
				if (item.pid === pid) {
					this.$set(item, 'selected', false)
				}
			})

			this.$set(list[index], 'selected', true)
			//存储已选择
			this.selectedInfo.specSelected = []
			list.forEach(item => {
				if (item.selected === true) {
					this.selectedInfo.specSelected.push(item)
				}
			})
			this.queryGoodsInfo()
			// 设置商品标题
			this.goodsInfo.title = this.selectedInfo.goodsInfo.name
			this.goodsInfo.summary = this.selectedInfo.goodsInfo.summary
			// 设置商品价格
			this.goodsInfo.price = this.selectedInfo.goodsInfo.price / 100
			this.goodsInfo.market_price = this.selectedInfo.goodsInfo.marketPrice / 100
		},
		// 查询商品信息。由于商品信息返回比较复杂，所以这里处理也比较复杂。实际开发中先和后端约定好
		queryGoodsInfo() {
			if (this.selectedInfo.specSelected.length > 1) {
				// 找到相同属性的商品ID
				let propsArr = []
				this.selectedInfo.specSelected.forEach(x => {
					propsArr.push(this.propTags.filter(item => item.tid == x.tid))
				})
				let propsObj = {}
				propsArr.forEach(x => {
					x.forEach(z => {
						if (propsObj[z.pid]) {
							propsObj[z.pid]++
						} else {
							propsObj[z.pid] = 1
						}
					})
				})
				let goodsPid = 0
				for (let x in propsObj) {
					if (propsObj[x] > 1) {
						goodsPid = x
					}
				}
				// 根据ID查询商品信息
				for (let x in this.productInfo) {
					if (x == goodsPid) {
						this.selectedInfo.goodsInfo = this.productInfo[x]
					}
				}
			} else if (this.selectedInfo.specSelected.length == 1) {
				let propsArr = []
				this.selectedInfo.specSelected.forEach(x => {
					propsArr.push(this.propTags.filter(item => item.tid == x.tid))
				})
				// 根据ID查询商品信息
				for (let x in this.productInfo) {
					if (x == propsArr[0][0].pid) {
						this.selectedInfo.goodsInfo = this.productInfo[x]
					}
				}
			}
		},
		// 轮播图切换
		swiperChange(e) {
			// const that = this
			this.swiperCurrent = e.detail.current
			if (this.swiperVideo.url !== '' && this.swiperVideo.playing == true) {
				if (e.detail.current != 0) {
					this.videoContext.pause()
				} else {
					this.videoContext.play()
				}
			}
		},
		// 预览大图
		previewImg(url) {
			if (typeof url == 'string') {
				url = url.split()
			}
			uni.previewImage({
				urls: url,
				fail() {
					this.$refs.miToast.show({
						title: `图片预览失败，请稍后再试`,
						type: 'error'
					})
				}
			})
		},
		addFootprint() {
			let footPrint = this.footPrint
			if (footPrint.length == 0) {
				this.$u.vuex('footPrint', [this.gid])
			} else {
				if (footPrint.indexOf(this.gid) == -1) {
					footPrint.unshift(this.gid)
					this.$u.vuex('footPrint', footPrint)
				}
			}
		},
		likeGoods() {
			let favGoods = this.favGoods
			if (favGoods.length == 0) {
				this.$u.vuex('favGoods', [this.gid])
				this.$refs.miToast.show({
					title: `添加收藏成功`,
					type: 'success'
				})
			} else {
				let index = favGoods.indexOf(this.gid)
				console.log(index)
				if (index == -1) {
					favGoods.unshift(this.gid)
					this.$u.vuex('favGoods', favGoods)
					this.$refs.miToast.show({
						title: `添加收藏成功`,
						type: 'success'
					})
				} else {
					favGoods.splice(index, 1)
					this.$u.vuex('favGoods', favGoods)
					this.$refs.miToast.show({
						title: `取消收藏成功`,
						type: 'success'
					})
				}
			}
			console.log(favGoods)
		},
		nextStep() {
			if (!this.isLogin) {
				return this.$refs.miToast.show({
					title: '请先进行登录',
					type: 'warning',
					url: '/pages/user/login/login'
				})
			}
			if (this.functionType == 'order') {
				this.placeOrder()
			} else if (this.functionType == 'cart') {
				this.addCart()
			}
		},
		placeOrder() {
			uni.hideLoading()
			this.$refs.miToast.show({
				title: `去下单了`,
				type: 'success'
			})
			this.goodsPop = false
		},
		addCart() {
			uni.showLoading({
				title:'加载中...'
			})
			const goods = {
				gid: this.selectedInfo.goodsInfo.gid,
				pid: this.selectedInfo.goodsInfo.pid,
				count: this.selectedInfo.goodsCount,
				checked: false
			}
			uniCloud.callFunction({
				name: 'addCart',
				data: { openid: this.userInfo.openid, goods },
				success: res => {
					uni.hideLoading()
					console.log(res.result)
					this.$refs.miToast.show({
						title: `加入购物车成功`,
						type: 'success',
						url: ''
					})
					this.goodsPop = false
				}
			})
		},
		back() {
			uni.navigateBack({
				delta: 1
			})
		},
		// 修改商品数量
		addCount(e) {
			this.selectedInfo.goodsCount = e.value
		},
		navigateTo(url, type) {
			if (type == 'tabbar') {
				uni.switchTab({
					url: url
				})
			} else if (type == 'page') {
				this.subMenu = false
				uni.navigateTo({
					url: url
				})
			}
		},
		showToast(msg) {
			this.$refs.miToast.show({
				title: `当前商品ID为：${msg}`,
				type: 'success'
			})
		},
		askQuestion() {
			this.$refs.miToast.show({
				title: '需要登录后才能发起提问~',
				type: 'warning'
			})
		},
		// 红包
		redPacket() {
			this.$refs.miToast.show({
				title: '登录后才能领取新人红包~',
				type: 'warning'
			})
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	computed: {
		swiperLength() {
			// return 5
			if (this.swiperVideo.url == '') {
				return this.swiperImgs.length
			} else {
				return this.swiperImgs.length + 1
			}
		}
	},
	filters: {
		level(lv) {
			if (lv == 'high') {
				return '高'
			} else if (lv == 'middle') {
				return '平'
			} else {
				return '低'
			}
		},
		scoreColor(lv) {
			if (lv == 'high') {
				return '#9f8052'
			} else {
				return '#999'
			}
		},
		levelColor() {
			if (lv == 'high') {
				return '#fff'
			} else {
				return '#999'
			}
		},
		levelBgColor() {
			if (lv == 'high') {
				return '#cf9e56'
			} else {
				return '#ebebeb'
			}
		}
	},
	components: {
		fullLoading
	},
	computed: {
		favorite() {
			if (this.favGoods.indexOf(this.gid) != -1) {
				return true
			} else {
				return false
			}
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f9f9f9;
}
.page {
	// background-color:red;
	// background-color: #f9f9f9;
}
.swiperBox {
	position: relative;
	swiper {
		height: 750rpx;
		.swiper-video {
			position: relative;
			video {
				width: 100%;
				height: 100%;
			}
			.poster {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 999;
			}
		}

		image {
			height: 100%;
			width: 100%;
		}
	}
	.playBtn {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		display: flex;
		align-items: center;
		transform: translateX(-50%);
		width: 168rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: rgba($color: #fff, $alpha: 0.6);
		font-size: 24rpx;
		image {
			width: 48rpx;
			height: 48rpx;
			min-width: 48rpx;
			margin: 0 18rpx 0 10rpx;
		}
		&:active {
			opacity: 0.8;
		}
	}
	.hide-video {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}
	.count {
		position: absolute;
		bottom: 54rpx;
		right: 0;
		padding: 0 10rpx;
		width: 80rpx;
		height: 36rpx;
		line-height: 36rpx;
		border-radius: 18rpx 0 0 18rpx;
		font-size: 20rpx;
		text-align: center;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.2);
		font-family: 'AllAndNone';
		span:nth-child(1) {
			font-size: 26rpx;
			margin-left: 4rpx;
		}
		span:nth-child(2) {
			// font-size: 26rpx;
			margin: 0 4rpx;
		}
	}
	.back {
		position: fixed;
		top: 40rpx;
		left: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 64rpx;
		height: 64rpx;
		font-size: 32rpx;
		color: #ffffff;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
	}
}
.ceshi {
	font-family: 'JDBold';
	font-size: 36rpx;
}
.ceshi1 {
	font-family: 'JDNormal';
	font-size: 36rpx;
}
.temaihui {
	position: relative;
	height: 110rpx;
	image {
		width: 750rpx;
		height: 100%;
	}
	.countDown {
		position: absolute;
		bottom: 16rpx;
		right: 90rpx;
		font-family: 'BebasNeue';
		// display: flex;
		// justify-content: space-between;
		// width: 156rpx;
		// text {
		// 	display: inline-block;
		// 	font-size: 22rpx;
		// 	color: #d51010;
		// 	font-weight: bold;
		// 	width: 40rpx;
		// 	text-align: center;
		// }
	}
}
.price_title {
	background-color: #ffffff;
	padding: 20rpx 24rpx 16rpx;
}
.priceBox {
	display: flex;
	margin-bottom: 16rpx;
	font-family: 'JDBold';
	.price {
		color: #d51010;
		font-weight: bold;
		font-size: 30rpx;
		text:nth-child(2) {
			font-size: 42rpx;
		}
	}
	.market_price {
		display: inline-block;
		margin: 18rpx 20rpx 0;
		font-size: 24rpx;
		color: #888;
		font-family: 'JDNormal';
		text-decoration: line-through;
	}
	.label {
		display: inline-block;
		margin-top: 18rpx;
		margin-left: 10rpx;
		padding: 0 8rpx;
		height: 32rpx;
		line-height: 32rpx;
		font-size: 22rpx;
		border-radius: 8rpx;
		color: #fff;
	}
	.like {
		margin-left: auto;
		image {
			height: 76rpx;
			width: 76rpx;
		}
	}
}
.goodsTitle {
	.main {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	.sub {
		color: #666;
	}
	.activity {
		color: #bf1111;
	}
	.activity,
	.sub {
		margin-top: 16rpx;
		font-size: 24rpx;
		// line-height: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.activity-entry {
		display: inline-block;
		padding: 4rpx 20rpx;
		margin: 10rpx 0 24rpx 0;
		font-size: 24rpx;
		color: #bf1111;
		border: 1rpx solid rgb(229, 203, 203);
		border-radius: 40rpx;
	}
}

.red-packet {
	width: 750rpx;
	height: 84rpx;
	image {
		width: inherit;
		height: inherit;
		&:active {
			opacity: 0.9;
		}
	}
}
.redPacket {
	color: #ff2e2e;
	font-size: 26rpx;
	margin-left: 16rpx;
}
.function {
	position: relative;
	u-icon {
		color: #c5c5c5 !important;
		transform: translateX(10rpx) !important;
	}
	.listItem {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		.selected-box {
			max-width: 560rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			.selected {
				margin-right: 8rpx;
			}
		}
	}
	.service {
		.item {
			display: flex;
			align-items: center;
			margin-right: 20rpx;
			image {
				width: 24rpx;
				height: 24rpx;
				min-width: 24rpx;
				margin-right: 6rpx;
			}
			text {
				font-size: 24rpx;
				color: #777;
			}
		}
		.item:last-child {
			max-width: 260rpx;
			text {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
	.subTitle {
		color: #777;
		font-size: 23rpx;
		margin-right: 20rpx;
		margin-left: -10rpx;
	}
	.selected {
		// font-weight: bold;
	}
	.isStock {
		color: #ff2e2e;
		margin-left: 16rpx;
	}
	.title {
		position: relative;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		border-bottom: 1rpx solid #f3f3f3;
		.close {
			position: absolute;
			right: 48rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.detail {
		height: 712rpx;
	}

	.serviceBox {
		padding: 0 20rpx;
		margin: 28rpx 0;
		.item {
			display: flex;
			align-items: center;
			image {
				width: 24rpx;
				height: 24rpx;
				min-width: 24rpx;
				margin-right: 8rpx;
			}
			text {
				color: #444;
				font-size: 28rpx;
			}
		}
		.serviceDetail {
			color: #777;
			font-size: 22rpx;
			margin-top: 10rpx;
			padding-left: 30rpx;
		}
	}
	.paramsBox {
		display: flex;
		align-items: center;
		height: 80rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #f8f8f8;
		.attr {
			color: #777;
			width: 160rpx;
		}
	}
}
.rank {
	position: relative;
	justify-content: space-between;
	width: 750rpx;
	height: 92rpx;
	padding: 0 24rpx 0 210rpx;
	font-size: 28rpx;
	font-weight: bold;
	image {
		position: absolute;
		top: 0;
		left: 0;
		width: inherit;
		height: inherit;
		z-index: -1;
	}
	& > text {
		width: 480rpx;
	}
}
.card {
	padding: 20rpx 0;
	background-color: #fff;
	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 26rpx;
		height: 60rpx;
		.title {
			font-size: 28rpx;
			color: rgb(51, 51, 51);
			font-weight: bold;
		}
		.more {
			display: flex;
			align-items: center;
			&:active {
				opacity: 0.8;
			}
			text {
				font-size: 24rpx;
				color: #999;
			}
			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
}
.comment {
	.tags {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 26rpx;
		.item {
			display: inline-block;
			padding: 6rpx 12rpx;
			// height: 40rpx;
			// line-height: 40rpx;
			font-size: 22rpx;
			color: #444;
			background-color: rgb(244, 231, 206);
			border-radius: 30rpx;
			margin: 10rpx 12rpx 10rpx 0;
			&:active {
				opacity: 0.8;
			}
		}
	}
	scroll-view {
		margin: 20rpx 0;
		.scoll-wrapper {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			padding: 0 26rpx;
			.item {
				padding: 30rpx 24rpx 0;
				margin-right: 32rpx;
				width: 616rpx;
				height: 226rpx;
				flex-shrink: 0;
				background-color: #fafafa;
				border-radius: 12rpx;
				.user {
					display: flex;
					align-items: center;
					image {
						width: 66rpx;
						height: 66rpx;
						border-radius: 33rpx;
					}
					.name {
						font-size: 26rpx;
						margin: 0 16rpx;
					}
				}
				.content {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #555;
					line-height: 48rpx;
				}
			}
			.more {
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 40rpx;
				height: 226rpx;
				border-radius: 12rpx;
				background-color: #fafafa;
				line-height: 28rpx;
				color: #555;
				font-size: 24rpx;
				image {
					margin-top: 6rpx;
					width: 22rpx;
					height: 22rpx;
				}
			}
			.white {
				padding: 0 13rpx;
				height: 226rpx;
			}
		}
	}
}
.question {
	.list {
		padding: 0 26rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
		.item {
			margin-bottom: 12rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				min-width: 30rpx;
			}
			.title {
				margin-left: 12rpx;
				color: #444;
				max-width: 550rpx;
			}
			.count {
				margin-left: auto;
				color: #999;
			}
		}
	}
	.ask-empty {
		padding: 0 26rpx;
		font-size: 24rpx;
		height: 100rpx;
		image {
			width: 25rpx;
			height: 34rpx;
			margin-right: 10rpx;
		}
		.btn {
			margin-left: auto;
			height: 50rpx;
			width: 134rpx;
			line-height: 50rpx;
			text-align: center;
			color: rgb(159, 128, 82);
			border: 1rpx solid rgba(159, 128, 82, 0.6);
			border-radius: 25rpx;
			&:active {
				opacity: 0.8;
			}
		}
	}
}
.swiper-goods {
	padding: 30rpx 0 10rpx;
	background-color: #fff;
	.head {
		height: 60rpx;
		align-items: center;
		.title {
			font-size: 28rpx;
			color: rgb(159, 128, 82);
		}
		.underline {
			margin-top: 6rpx;
			width: 100rpx;
			height: 2rpx;
			border-radius: 1rpx;
			background-color: rgb(159, 128, 82);
		}
	}
	swiper {
		margin-top: 10rpx;
		height: 800rpx;
		width: 100%;
		.goods {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 20rpx;
			.item {
				position: relative;
				width: 32%;
				border-radius: 8rpx;
				margin-bottom: 24rpx;
				font-size: 28rpx;
				overflow: hidden;
				.goods-img {
					width: 100%;
					height: 228rpx;
					background-color: #f8f8f8;
					border-radius: 8rpx 8rpx 0 0;
				}
				.labelbox {
					position: absolute;
					top: 192rpx;
					left: 0;
					text {
						display: inline-block;
						margin-right: 10rpx;
						padding: 0 10rpx;
						height: 28rpx;
						line-height: 28rpx;
						font-size: 22rpx;
						color: #ffffff;
						border-radius: 4rpx;
						text-align: center;
					}
				}
				.title {
					width: 100%;
					padding: 0 10rpx;
					height: 72rpx;
					font-size: 24rpx;
					color: rgb(51, 51, 51);
					line-height: 36rpx;
					margin-top: 6rpx;
				}
				.price {
					margin: 10rpx 0 0 10rpx;
					color: rgb(227, 13, 13);
					font-size: 24rpx;
					// height: 40rpx;
					font-family: 'AllAndNone';
					.priceMin {
						font-size: 28rpx;
					}
				}
			}
		}
	}
}
.shop {
	.info {
		margin: 20rpx 0 30rpx;
		padding: 0 24rpx;
		font-size: 24rpx;
		height: 80rpx;
		.logo {
			width: 80rpx;
			height: 80rpx;
			min-width: 80rpx;
			border-radius: 8rpx;
		}
		.name {
			margin-left: 16rpx;
			height: 80rpx;
			justify-content: space-between;
			.main {
				color: #555;
				font-size: 28rpx;
			}
			.sub {
				color: #999;
				font-size: 22rpx;
			}
		}
		.go-to-shop {
			margin-left: auto;
			text {
				color: rgb(159, 128, 82);
			}
			image {
				width: 22rpx;
				height: 22rpx;
			}
		}
	}
	.grade {
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding: 0 24rpx;
		font-size: 24rpx;
		color: #999;
		.item {
			.score {
				margin: 0 8rpx;
			}
			.level {
				display: inline-block;
				padding: 0 4rpx;
				border-radius: 4rpx;
				background-color: blue;
			}
		}
	}
}
.detailImgs {
	display: flex;
	flex-direction: column;
	min-height: 1000rpx;
	image {
		width: 100%;
	}
}
.goodsInfo {
	display: flex;
	padding: 30rpx;
	image {
		width: 166rpx;
		height: 166rpx;
		min-width: 166rpx;
		border-radius: 10rpx;
	}
	.selectedInfo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 30rpx;
		.price {
			color: #d51010;
			font-weight: bold;
			text:first-child {
				font-size: 20rpx;
			}
			text:last-child {
				font-size: 38rpx;
			}
		}
		.selected {
			color: #555;
			font-size: 26rpx;
			text:nth-child(n + 2) {
				margin-right: 10rpx;
			}
		}
	}
}
.propBox {
	padding: 0 30rpx 40rpx;
	// width: 100%;
	height: 620rpx;
	-webkit-scrollbar: none;
	box-sizing: border-box;
	.prop {
		margin-bottom: 20rpx;
		.attr {
			font-size: 24rpx;
			color: #a9a9a9;
			margin-bottom: 10rpx;
		}
		.value {
			display: flex;
			flex-wrap: wrap;
			text {
				display: block;
				margin: 10rpx 16rpx;
				padding: 14rpx 28rpx;
				font-size: 26rpx;
				background-color: #f4f4f4;
				border-radius: 8rpx;
				border: 1rpx #f4f4f4 solid;
			}
			.selected {
				border-color: #bf1111;
				color: #bf1111;
				background-color: #f6eded;
			}
		}
	}
	.count {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-bottom: 40rpx;
		.attr {
			margin-bottom: 0;
		}
	}
}
.goodsPop {
	position: relative;
	.btnBox {
		position: absolute;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		// background-color: blue;
		.btn {
			position: relative;
			width: 700rpx;
			height: 80rpx;
			border-radius: 40rpx;
			line-height: 80rpx;
			background: linear-gradient(to right, #ef4c2c, #d51110);
			text-align: center;
			color: #fff;
			&:active {
				opacity: 0.8;
			}
		}
	}
}
.u-hover-class {
	background-color: #f2f3f5 !important;
	opacity: 1;
}
.bottom-menu {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	height: 100rpx;
	display: flex;
	background-color: #fff;
	.btns {
		display: flex;
		font-size: 22rpx;
		.btn {
			width: 100rpx;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			&:active {
				background-color: #f2f3f4;
			}
			.contact {
				position: absolute;
				width: 100rpx;
				height: 100rpx;
				z-index: 1;
				opacity: 0;
			}
		}
	}
	.next {
		padding: 10rpx;
		display: flex;
		width: 450rpx;
		view {
			width: 50%;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			&:active {
				opacity: 0.8;
			}
		}
		view:first-child {
			background: linear-gradient(90deg, #ffd01e, #ff8917);
			border-radius: 40rpx 0 0 40rpx;
		}
		view:last-child {
			background: linear-gradient(90deg, #ff6034, #ee0a24);
			border-radius: 0 40rpx 40rpx 0;
		}
	}
}
.navbar {
	position: fixed;
	width: 750rpx;
	top: 0;
	z-index: 10;
	.subMenu {
		position: absolute;
		top: 96rpx;
		left: 20rpx;
		width: 176rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		z-index: 12;
		.item {
			display: flex;
			align-items: center;
			height: 80rpx;
			border-bottom: 1rpx solid #f0f0f0;
			color: #555;
			font-size: 24rpx;
			&:active {
				background-color: #f2f3f4;
			}
			u-icon {
				margin: 0 16rpx;
			}
		}
		.item:last-child {
			border: none;
		}
	}
	.triangle {
		position: absolute;
		top: 88rpx;
		left: 140rpx;
		width: 30rpx;
		height: 30rpx;
		background-color: #fff;
		transform: rotate(45deg);
		z-index: 11;
	}
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 1334rpx;
		z-index: 11;
		// background-color: rgba($color: #000000, $alpha: 0.2);
	}
}
.u-border-bottom::after {
	border: none;
}
.slot-wrap {
	position: relative;
	margin-left: 20rpx;
	width: 176rpx;
	height: 60rpx;
	border-radius: 30rpx;
	color: #fff;
	background-color: rgba($color: #000000, $alpha: 0.2);
	border: 2rpx solid rgba($color: #ffffff, $alpha: 0.2);
	.slot-icon {
		justify-content: center;
		width: 50%;
		height: inherit;
	}
	.gap {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 2rpx;
		height: 36rpx;
		background-color: rgba($color: #f1f1f1, $alpha: 0.2);
	}
}
.u-back-top {
	image {
		width: 80rpx;
		height: 80rpx;
	}
}
</style>
